<template>
    <div class="main">
        <div class="mode" @click="push('game')">单机</div>
        <div class="mode" @click="push('game')">联机</div>
        <textarea v-model="socketId" class="mode" />
    </div>
</template>
<script lang="ts">
    import { defineComponent } from 'vue';

    export default defineComponent({
        data() {
            return {
                socketId: 0,
            };
        },
        methods: {
            push(name: string) {
                this.$router.push({ name: 'game', params: { socketId: this.socketId } });
            },
        },
    });
</script>
<style lang="scss">
    .main {
        display: flex;
        justify-content: space-evenly;
        height: 100%;

        .mode {
            width: 300px;
            height: 200px;
            padding: 0;
            border: 2px solid blueviolet;
            border-radius: 5px;
            outline: none;
            appearance: none;
        }
    }
</style>
